<template>
  <div class="main home-tab-detail">
    <section>
      <el-form :model="formData" ref="form" label-width="160px">
        <el-form-item label="页面名称：" prop="name" :rules="commonRules.notNullRule">
          <el-input v-model="formData.name" placeholder="页面名称：" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="页面类型：" prop="type">
          <el-select v-model="formData.type" placeholder="请选择" size="medium" filterable>
            <el-option label="线上首页-营销" :value="1"></el-option>
            <el-option label="线上首页-类目" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签到地址：" prop="jumpSignUrl" :rules="commonRules.urlRule">
          <el-input v-model="formData.jumpSignUrl" placeholder="签到地址：" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="主要内容：" prop="items" :rules="commonRules.notNullRule">
          <div class="warn-info">最多添加 10 个导航，拖动选中的导航可对其排序, 图片如果有上传，默认显示图片，如果不上传，则只显示文字</div>
          <draggable v-model="formData.items" :options="{group:'tabItems'}" @start="drag=true" @end="drag=false">
            <el-card v-for="(item, index) in formData.items" :key="index" class="content-item">
              <a href="javascript: void(0);" class="el-icon-remove" @click="delItem(index)"></a>
              <el-form-item label="图片：" :prop="`items[${index}].picUrl`" label-width="110px">
                <el-upload
                  class="avatar-uploader"
                  accept="image/*"
                  :action="upladUrl"
                  name="file"
                  :show-file-list="false"
                  :before-upload="beforeUpload"
                  :on-success="(res)=>{ item.picUrl = replaceImgUrl(res.filePath); }">
                    <img v-if="item.picUrl" :src="item.picUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="delete-item-img" @click="item.picUrl=''">移除</div>
              </el-form-item>
              <link-type :titleRequire="true" :disableTypes="[1, 2]" :propPrefix="`items[${index}]`" :link-obj="item" />
              <el-form-item label="起止时间：" :prop="`items[${index}].tempDateTime`" label-width="110px">
                <el-date-picker
                  v-model="item.tempDateTime"
                  type="datetimerange"
                  placeholder="选择日期时间" 
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="timestamp">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="显示类型：" label-width="110px">
                <el-radio v-model="item.showType" :label="1">默认显示</el-radio>
                <el-radio v-model="item.showType" :label="2">其他逻辑</el-radio>
              </el-form-item>
              <template v-if="item.showType === 2">
                <el-form-item label="安卓显示：" label-width="110px">
                  <el-radio v-model="item.androidShowInfo.status" :label="1">全版本显示</el-radio>
                  <el-radio v-model="item.androidShowInfo.status" :label="2">全版本不显示</el-radio>
                  <el-radio v-model="item.androidShowInfo.status" :label="3">仅指定版本号显示</el-radio>
                  <el-radio v-model="item.androidShowInfo.status" :label="4">仅指定版本号不显示</el-radio>
                </el-form-item>
                <el-form-item v-if="item.androidShowInfo.status > 2" label="安卓版本号：" label-width="110px" :prop="`items[${index}].androidShowInfo.versionList`" :rules="commonRules.notNullRule">
                  <div class="version-add">
                    <el-row>
                      <el-col :span="5"><el-input type="number" v-model="item.androidShowInfo.first"></el-input></el-col>
                      <el-col :span="1" align="center">.</el-col>
                      <el-col :span="5"><el-input type="number" v-model="item.androidShowInfo.second"></el-input></el-col>
                      <el-col :span="1" align="center">.</el-col>
                      <el-col :span="5"><el-input type="number" v-model="item.androidShowInfo.third"></el-input></el-col>
                      <el-col :span="7" align="center">
                        <el-button type="primary" size="mini" @click="addVersion(item, 'android')">添加版本</el-button>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="version-list">
                    <el-tag v-for="(vItem, vIndex) in item.androidShowInfo.versionList" :key="vIndex" effect="dark" closable @close="delVersion('androidShowInfo', item, vIndex)">{{vItem}}</el-tag>
                  </div>
                </el-form-item>
                <el-form-item label="iOS显示：" label-width="110px">
                  <el-radio v-model="item.iosShowInfo.status" :label="1">全版本显示</el-radio>
                  <el-radio v-model="item.iosShowInfo.status" :label="2">全版本不显示</el-radio>
                  <el-radio v-model="item.iosShowInfo.status" :label="3">仅指定版本号显示</el-radio>
                  <el-radio v-model="item.iosShowInfo.status" :label="4">仅指定版本号不显示</el-radio>
                </el-form-item>
                <el-form-item v-if="item.iosShowInfo.status > 2" label="iOS版本号：" label-width="110px" :prop="`items[${index}].iosShowInfo.versionList`" :rules="commonRules.notNullRule">
                  <div class="version-add">
                    <el-row>
                      <el-col :span="5"><el-input type="number" v-model="item.iosShowInfo.first"></el-input></el-col>
                      <el-col :span="1" align="center">.</el-col>
                      <el-col :span="5"><el-input type="number" v-model="item.iosShowInfo.second"></el-input></el-col>
                      <el-col :span="1" align="center">.</el-col>
                      <el-col :span="5"><el-input type="number" v-model="item.iosShowInfo.third"></el-input></el-col>
                      <el-col :span="7" align="center">
                        <el-button type="primary" size="mini" @click="addVersion(item, 'ios')">添加版本</el-button>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="version-list">
                    <el-tag v-for="(vItem, vIndex) in item.iosShowInfo.versionList" :key="vIndex" effect="dark" closable @close="delVersion('iosShowInfo', item, vIndex)">{{vItem}}</el-tag>
                  </div>
                </el-form-item>
                <el-form-item label="h5显示：" label-width="110px" :prop="`items[${index}].h5ShowInfo`">
                  <el-radio v-model="item.h5ShowInfo" :label="1">显示</el-radio>
                  <el-radio v-model="item.h5ShowInfo" :label="2">不显示</el-radio>
                </el-form-item>
                <el-form-item label="小程序显示：" label-width="110px" :prop="`items[${index}].miniAppShowInfo`">
                  <el-radio v-model="item.miniAppShowInfo" :label="1">显示</el-radio>
                  <el-radio v-model="item.miniAppShowInfo" :label="2">不显示</el-radio>
                </el-form-item>
              </template>
            </el-card>
          </draggable>
          <el-button v-if="formData.items.length < 10" type="primary" size="small" icon="el-icon-circle-plus" @click="addItem">添加微页面导航</el-button>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button type="primary" size="small" @click="save" plain>保存</el-button>
        <el-button type="default" size="small" @click="$router.push({ name: 'homeTab' })" plain>返回</el-button>
      </div>
    </section>
  </div>
</template>
<script>
import Draggable from 'vuedraggable'
import Sortable from 'sortablejs'
import LinkType from '@/components/LinkType/index'
export default {
  name: 'homeTabDetail',
  components: {
    LinkType,
    Draggable,
    Sortable
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return{
      pageLoading: true,
      formData: {
        name: '',
        type: 1,
        jumpSignUrl: '',
        items: []
      }
    }
  },
  created() {
    if(this.id) {
      this.fetchData()
    }
  },
  methods: {
    fetchData() {
      this.pageLoading = true
      this.request({
        url: `/manage-home-web/v5/tab/detail/${this.id}`,
        method: 'get'
      }).then(({data}) => {
        data.items.map(i => {
          i.tempDateTime = i.startTime ? [i.startTime, i.endTime] : []
          i.androidShowInfo.first = ''
          i.androidShowInfo.second = ''
          i.androidShowInfo.third = ''
          i.iosShowInfo.first = ''
          i.iosShowInfo.second = ''
          i.iosShowInfo.third = ''
        })
        this.formData = data
        this.pageLoading = false
      }).catch(err => {
        console.log(err)
        this.pageLoading = false
      })
    },
    // 添加一个微页面导航
    addItem(index){
      this.formData.items.push({
        picUrl: '',
        title: '',
        jumpType: 1,
        jumpUrl: '',
        jumpPageType: 5,
        jumpPageValue: '',
        startTime: '',
        endTime: '',
        showType: 1,
        iosShowInfo: {
          status: 1,
          versionList: [],
          first: '',
          second: '',
          third: ''
        },
        androidShowInfo: {
          status: 1,
          versionList: [],
          first: '',
          second: '',
          third: ''
        },
        h5ShowInfo: 1,
        miniAppShowInfo: 1
      })
    },
    // 删除一个微页面导航
    delItem(index){
      this.$confirm("确定移除该内容?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.formData.items.splice(index, 1)
      }).catch(() => {
        this.$message({ type: "info", message: "已取消操作" })
      })
    },
    addVersion(item, type){
      const keyVersion = item[`${type}ShowInfo`]
      if(keyVersion.first!=='' && keyVersion.second!=='' && keyVersion.third!==''){
        let version = `${keyVersion.first}.${keyVersion.second}.${keyVersion.third}`
        if (keyVersion.versionList.includes(version)){
          this.$message.warning('该版本已存在')
        } else {
          item[`${type}ShowInfo`].versionList.push(version)
        }
      } else {
        this.$message.warning('请输入完整的版本号')
      }
    },
    delVersion(type, item, index){
      item[type].versionList.splice(index, 1)
    },
    // 保存或者更新
    save() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.formData.items.map(i => {
          let flag = i.tempDateTime && i.tempDateTime.length
          i.startTime = flag ? i.tempDateTime[0] : ''
          i.endTime = flag ? i.tempDateTime[1] : ''
        })
        console.log(this.formData)
        this.request({
          url: this.formData.id ? '/manage-home-web/v5/tab/update' : '/manage-home-web/v5/tab/create',
          method: 'post',
          data: this.formData
        }).then(res => {
          this.dialogVisible = false
          this.btnLoading = false
          this.$message.success('操作成功')
          this.$router.push({ name: 'homeTab' })
        }).catch(e => {
          this.btnLoading = false
        })
      })
    }
  }
}
</script>
<style lang="scss">
.home-tab-detail{
  .el-form-item{
    margin-bottom: 10px;
  }
  .el-input{
    width: 100%;
    max-width: 500px;
  }
  .warn-info{
    color: red;
    font-size: 12px;
  }
  .content-item{
    max-width: 800px;
    padding: 12px;
    border: 1px solid #efefef;
    margin-bottom: 12px;
    position: relative;
    .delete-item-img{
      color: red;
      cursor: pointer;
      margin: -12px 0 10px;
    }
    .el-icon-remove{
      color: red;
      font-size: 18px;
      cursor: pointer;
      top: 12px;
      right: 12px;
      position: absolute;
      z-index: 2;
    }
    .version-list{
      margin-top: 10px;
      min-height: 100px;
      padding: 0 10px;
      background: #f2f2f2;
    }
  }
  .el-tag{
    margin-right: 12px;
  }
  .footer{
    text-align: center;
    padding: 12px;
  }
}
</style>